<!--
 * @Author: [wcy]
 * @Date: 2021-10-28 16:44:55
 * @LastEditors: [wcy]
 * @LastEditTime: 2021-10-31 21:22:36
 * @Description: 
-->
<template >
  <div class="container">
    <!-- 头像 -->
    <div class="header">
      <img class="headimg" :src="tableData.userFace" alt="" />
      <button class="toBack" @click="$router.back()">返回</button>
      <span class="head" @click="toModify">修改头像</span>
    </div>
    <div class="text">
      <div>登录用户:&nbsp;&nbsp;{{ tableData.username }}</div>
      <div>用户姓名:&nbsp;&nbsp;{{ tableData.realname }}</div>
      <div>用户手机:&nbsp;&nbsp;{{ tableData.telephone }}</div>
     <div>
        用户性别:
        <span v-if="tableData.gender == 'male'">男</span>
        <span v-else-if="tableData.gender == 'female'">女</span>
        <span v-else>未选择</span>
      </div>
      <div>用户生日:&nbsp;&nbsp;{{ test |Femate}}</div>
      <div>注册时间:&nbsp;&nbsp;{{ tableData.registerTime }}</div>
      <div>邮箱:&nbsp;&nbsp;{{ tableData.email }}</div>
      <div>用户状态:&nbsp;&nbsp;{{ tableData.status }}</div>
    </div>
    <!-- 修改头像 -->
    <el-dialog title="更改头像" :visible.sync="Visible">
      头像<el-upload
        class="avatar-uploader"
        action="http://81.69.24.232/pet/jz_upload.php"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="toUpdate">确 定</el-button>
      </span>
    </el-dialog>
    <div class="updateMsg">
        <el-button type="text" style="color: #52c2ba" @click="toEdit"
        >修改个人信息</el-button>
    </div>
    <!-- 修改信息模态框 -->
    <el-dialog title="提示" :visible.sync="editVisible">
      <el-form :model="form" disabled label-width="80px">
        <el-form-item label="登录用户" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机" prop="telephone">
          <el-input v-model="form.telephone"></el-input> </el-form-item
        ><el-form-item label="用户邮箱" prop="telephone">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="用户生日">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.dob"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="toEditVisible">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "../../utils/request";
import qs from "qs";
export default {
  data() {
    return {
      id: "",
      tableData: {},
      test:'暂无',
      Visible: false,
      imageUrl: "",
      editVisible: false,
      rules: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, trigger: "blur" }],
      },
      
      form: {
      
      },
    };
  },
  methods: {
    getMsg() {
      request
        .get("/baseUser/findUserDetailsById", { params: { id: this.id } })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    // 修改头像
    toModify() {
      this.Visible = true;
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      this.tableData.photo = res;
      this.imageUrl = res;
    },
    // 确认修改
    toUpdate() {
      this.Visible = false;
      this.getMsg();
      this.$message.success("修改成功");
    },
    // 编辑
    toEdit() {
      this.editVisible = true;
      this.form = { ...this.tableData };
    },
    // 编辑成功
    toEditVisible(){
       
        request
          .post("/baseUser/saveOrUpdate", qs.stringify(this.form))
          .then(() => {
            this.getMsg();
            this.editVisible = false;
            this.test=new Date(this.form.dob).getTime();
            this.$message.success("修改成功");
          });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getMsg();
  },
};
</script>

<style >
/* 父容器 */
.container {
  display: flex;
  flex-direction: column;
}
/* 顶部 */
.header {
  /* margin: 0 auto; */
  border-bottom: 2px solid rgba(200, 200, 200, 0.5);
  position: relative;
}
.head {
  position: absolute;
  color: #52c2ba;
  font-size: 15px;
  right: 200px;
  bottom: 20px;
  cursor: pointer;
}
.headimg {
  /* border: 1px solid; */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-left: 200px;
}
.toBack {
  position: absolute;
  right: 200px;
  top: 10px;
}
.text {
  height: 500px;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  letter-spacing: 3px;
  font-size: 18px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 修改个人信息 */
.updateMsg {
  /* position: absolute; */
  position: fixed;
  bottom: 50px;
  right: 200px;
}
</style>